﻿@page "/components/avatar"

<DocsPage>
    <DocsPageHeader Title="Avatar" SubTitle="The component is typically used to display circular user profile pictures, icons or text." />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader Title="Usage">
                <Description>Basic avatars, normally used to display text or numbers.<CodeInline>MudAvatar</CodeInline> can be colored with the <CodeInline>Color</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarBasicExample />
            </SectionContent>
            <SectionSource Code="AvatarBasicExample" GitHubFolderName="Avatar" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Outlined">
                <Description>By default, the avatar is filled but can be changed with the <CodeInline>Variant</CodeInline> property.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarOutlinedExample />
            </SectionContent>
            <SectionSource Code="AvatarOutlinedExample" GitHubFolderName="Avatar" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Icons">
                <Description>To create an icon avatar, just add an <CodeInline>MudIcon</CodeInline> inside it.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarIconExample />
            </SectionContent>
            <SectionSource Code="AvatarIconExample" GitHubFolderName="Avatar" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Images">
                <Description>Avatars can display images as well, specify a link to the image with <CodeInline>Image</CodeInline>.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarImageExample />
            </SectionContent>
            <SectionSource Code="AvatarImageExample" GitHubFolderName="Avatar" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Sizes">
                <Description>You can change the size with the pre-defined <CodeInline>Size</CodeInline> prop or change the <CodeInline>Width</CodeInline> and <CodeInline>Height</CodeInline> in CSS.</Description>
            </SectionHeader>
            <SectionContent Outlined="true">
                <AvatarSizeExample />
            </SectionContent>
            <SectionSource Code="AvatarSizeExample" GitHubFolderName="Avatar" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Shapes">
                <Description>With the <CodeInline>Rounded</CodeInline> and <CodeInline>Square</CodeInline> props, you can change the border radius.</Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarShapesExample />
            </SectionContent>
            <SectionSource Code="AvatarShapesExample" GitHubFolderName="Avatar" ShowCode="false" />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader Title="Groups">
                <Description>You can group or stack avatars with <CodeInline>MudAvatarGroup</CodeInline></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarGroupExample />
            </SectionContent>
            <SectionSource Code="AvatarGroupExample" GitHubFolderName="Avatar" ShowCode="true" />
        </DocsPageSection>

        @*MudBadge needs fixing before showing this. Does not look good with avatars.*@

        @*<DocsPageSection>
            <SectionHeader Title="Badges">
                <Description></Description>
            </SectionHeader>
            <SectionContent Outlined="true" DisplayFlex="true">
                <AvatarBadgeExample />
            </SectionContent>
            <SectionSource Code="AvatarBadgeExample" GitHubFolderName="Avatar" ShowCode="true" />
        </DocsPageSection>*@
    </DocsPageContent>
</DocsPage>
